function pageRenderTreejs(menu){
return `
<div class="box" id="app-main-${menu.index}">
    <div class="table-options-box">
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="tree-wrap">
                    <el-scrollbar height="100%">
                        <el-tree :data="treeList" :props="defaultProps" :render-content="renderContent" @node-click="handleNodeClick">
                            <template #default="{node,data}">
                                <el-tooltip class="box-item" effect="dark" :content="node.label" placement="top">
                                    <span>{{node.label}}</span>
                                </el-tooltip>
                            </template>
                        </el-tree>
                    </el-scrollbar>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="middle-table-wrap">
                    <el-form class="zh-form" ref="refSearchForm" :model="formModelValue"
                        :label-width="formconfig.formLabelWidth || 'auto'" type="flex" inline justify="end"
                        style="flex-wrap: wrap; flex-direction: row" :validate-on-rule-change="false">
                        <el-form-item v-for="(item, index) in formconfig.fieldList" :key="'form-item' + index"
                            :label="item.label" :prop="item.prop" :label-width="item.labelWidth">
                            <!-- 动态渲染表单项，这里以文本输入框为例 -->
                            <el-input v-if="item.type === 'input'" v-model="formModelValue[item.prop]" clearable
                                placeholder="请输入"></el-input>
                            <!-- 根据不同类型的item渲染不同的表单项 -->
                            <el-select v-if="item.type === 'select'" v-model="formModelValue[item.prop]" filterable
                                remote :remote-method="remoteMethod" :loading="selectLoading" clearable
                                placeholder="请选择">
                                <el-option v-for="(x, index) in clientList" :key="x.value" :label="x.label"
                                    :value="x.value"></el-option>
                            </el-select>
                            <el-date-picker v-if="item.type === 'date'" v-model="formModelValue[item.prop]" type="date"
                                value-format="YYYY-MM-DD" placeholder="请选择日期" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getTableData(clickNode)">查询</el-button>
                            <el-dropdown class="btn-wrap">
                                <el-button type="primary" plain>
                                  更多<i class="iconfont icon-arrowdown ml5"></i>
                                </el-button>
                                <template #dropdown>
                                  <el-dropdown-menu>
                                    <el-dropdown-item>导入数据</el-dropdown-item>
                                    <el-dropdown-item>列显示/隐藏</el-dropdown-item>
                                    <el-dropdown-item>复制数据</el-dropdown-item>
                                    <el-dropdown-item>导出表格</el-dropdown-item>
                                    <el-dropdown-item>打印数据</el-dropdown-item>
                                    <el-dropdown-item>全选当前页</el-dropdown-item>
                                    <el-dropdown-item>全选所有页</el-dropdown-item>
                                    <el-dropdown-item>取消全选</el-dropdown-item>
                                    <el-dropdown-item>只看选中</el-dropdown-item>
                                  </el-dropdown-menu>
                                </template>
                              </el-dropdown>
                        </el-form-item>
                    </el-form>
                    <el-table ref="refMiddleTable" class="zh-el-table" :data="tableData" size="default" row-key="id"
                        :height="tableConfig.height || '100%'" :highlight-current-row="tableConfig.highlightCurrentRow" 
                        @row-click="clickRow">
                        <el-table-column v-if="tableConfig.hasSelection" type="selection" width="50" align="center"
                            reserve-selection>
                        </el-table-column>
                        <el-table-column v-if="tableConfig.hasIndex" type="index" width="60" label="序号" align="center">
                        </el-table-column>
                        <el-table-column v-for="(item, index) in tableConfig.columns" :key="index"
                            :width="item.width ? item.width : ''" :min-width="item.minWidth ? item.minWidth : ''"
                            :align="item.align ? item.align : 'center'" :label="item.label" :prop="item.prop"
                            :fixed="item.fixed" :sortable="item.sortable" :class-name="item.className">
                        </el-table-column>
                        <el-table-column v-if="tableConfig.actionColumn" :fixed="right"
                            :width="tableConfig.actionColumn?.width" :min-width="tableConfig.actionColumn?.minWidth"
                            :label="tableConfig.actionColumn?.label"
                            :align="tableConfig.actionColumn?.align ? tableConfig.actionColumn.align : 'center'">
                            <template #default="scope">
                                <el-button v-if="tableConfig.actionColumn?.hasRowEditAction" link type="primary"
                                    size="small" :icon="Edit"
                                    @click="() => openAddEditModal('edit', scope.row)">编辑</el-button>
                                <el-button v-if="tableConfig.actionColumn?.hasRowDeleteAction" link type="danger"
                                    size="small" :icon="Delete" @click.stop="rowDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" background
                            layout="prev, pager, next, jumper" :total="1000" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" />
                    </div>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="right-table-wrap">
                    <el-form class="zh-form" ref="refDetailSearchForm" :model="detailFormModelValue"
                        :label-width="detailFormconfig.formLabelWidth || 'auto'" type="flex" inline justify="end"
                        style="flex-wrap: wrap; flex-direction: row" :validate-on-rule-change="false">
                        <el-form-item v-for="(item, index) in detailFormconfig.fieldList" :key="'form-item' + index"
                            :label="item.label" :prop="item.prop" :label-width="item.labelWidth">
                            <!-- 动态渲染表单项，这里以文本输入框为例 -->
                            <el-input v-if="item.type === 'input'" v-model="detailFormModelValue[item.prop]" clearable
                                placeholder="请输入"></el-input>
                            <!-- 根据不同类型的item渲染不同的表单项 -->
                            <el-select v-if="item.type === 'select'" v-model="detailFormModelValue[item.prop]" filterable
                                remote :remote-method="remoteMethod" :loading="selectLoading" clearable
                                placeholder="请选择">
                                <el-option v-for="(x, index) in clientList" :key="x.value" :label="x.label"
                                    :value="x.value"></el-option>
                            </el-select>
                            <el-date-picker v-if="item.type === 'date'" v-model="detailFormModelValue[item.prop]" type="date"
                                value-format="YYYY-MM-DD" placeholder="请选择日期" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getTableData(clickNode)">查询</el-button>
                            <el-button type="success" @click="() => openAddEditModal('add')">新增</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table ref="refRightTable" class="zh-el-table" :data="detailTableData" size="default"
                        row-key="id" :height="detailTableConfig.height || '100%'"
                        :highlight-current-row="detailTableConfig.highlightCurrentRow">
                        <el-table-column v-if="detailTableConfig.hasSelection" type="selection" width="50"
                            align="center" reserve-selection>
                        </el-table-column>
                        <el-table-column v-if="detailTableConfig.hasIndex" type="index" width="60" label="序号"
                            align="center">
                        </el-table-column>
                        <el-table-column v-for="(item, index) in detailTableConfig.columns" :key="index"
                            :width="item.width ? item.width : ''" :min-width="item.minWidth ? item.minWidth : ''"
                            :align="item.align ? item.align : 'center'" :label="item.label" :prop="item.prop"
                            :fixed="item.fixed" :sortable="item.sortable" :class-name="item.className">
                        </el-table-column>
                        <el-table-column v-if="detailTableConfig.actionColumn" :fixed="right"
                            :width="detailTableConfig.actionColumn?.width"
                            :min-width="detailTableConfig.actionColumn?.minWidth"
                            :label="detailTableConfig.actionColumn?.label"
                            :align="detailTableConfig.actionColumn?.align ? detailTableConfig.actionColumn.align : 'center'">
                            <template #default="scope">
                                <el-button v-if="detailTableConfig.actionColumn?.hasRowEditAction" link type="primary"
                                    size="small" :icon="Edit"
                                    @click="() => openAddEditModal('edit', scope.row)">修改</el-button>
                                <el-button v-if="detailTableConfig.actionColumn?.hasRowDeleteAction" link type="danger"
                                    size="small" :icon="Delete" @click.stop="rowDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination v-model:currentPage="detailCurrentPage" v-model:page-size="detailPageSize" background
                            layout="prev, pager, next, jumper" :total="1000" @size-change="handleDetailSizeChange"
                            @current-change="handleDetailCurrentChange" />
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog v-model="addEditModal.show" v-if="addEditModal.show" :title="addEditModal.title"
            :closeOnClickModal="false" :top="addEditModal.top" :append-to-body="true" :close="addEditModal.cancel">
            <el-form class="zh-form" ref="refaddEditForm" :model="addEditFormModelValue"
                :label-width="addEditFormconfig.formLabelWidth || 'auto'" type="flex" inline justify="end"
                style="flex-wrap: wrap; flex-direction: row" :validate-on-rule-change="false">
                <el-form-item v-for="(item, index) in addEditFormconfig.fieldList" :key="'form-item' + index"
                    :label="item.label" :prop="item.prop" :label-width="item.labelWidth">
                    <!-- 动态渲染表单项，这里以文本输入框为例 -->
                    <el-input v-if="item.type === 'input'" v-model="addEditFormModelValue[item.prop]"
                        :disabled="item.disabled" placeholder="请输入"></el-input>
                    <!-- 根据不同类型的item渲染不同的表单项 -->
                    <el-select v-if="item.type === 'select'" v-model="formModelValue[item.prop]" filterable
                        remote :remote-method="item.remoteMethod" :loading="addLoading" clearable
                        placeholder="请选择" @change="item.changeMethod">
                        <el-option v-for="(x, index) in item.options" :key="x.value" :label="x.label"
                            :value="x.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addEditModal.cancel">取消</el-button>
                    <el-button type="primary" :loading="addEditModal.loadingSubmit"
                        @click="addEditModal.submit">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</div>

<script type="module">
    (function () {
        const { createApp, ref, onMounted } = Vue;
        const { ElMessage, ElMessageBox } = window.ElementPlus;
        const vue3Composition1 = {
            setup() {
                // 左侧树
                const treeList = ref([]);
                const defaultProps = {
                    label: "label",
                    children: "children"
                };
                const clickNode = ref({});
                const handleNodeClick = (node) => {
                    console.log("nodeclick:", node);
                    clickNode.value = node;
                    getTableData(node);
                };
                // 中间搜索表单
                const formconfig = ref({
                    fieldList: [],
                });
                const formModelValue = ref({});
                // 中间表格
                const tableConfig = ref({
                    hasSelection: false,
                    hasIndex: false,
                    highlightCurrentRow: true,
                    columns: [
                        { label: "角色", prop: "test" },
                        { label: "角色1", prop: "id" },
                        { label: "角色2", prop: "role2" },
                    ],
                });
                // 获取中间表格内容
                const tableData = ref([]);
                const getTableData = async (node) => {
                    if(node){
                        const res = await fetchData(
                        "https://cloud.lugangwool.com/server/getkehulbapi.php?dbcl=",
                        {
                            data: { ...formModelValue.value, icp_customer_code: node.id },
                            token: "28532B0F-60A1-D5FD-81F3-9E4EF092A67B",
                            datatab: "35dbo9Do3bIT2mlhfULa2xm0ffZSTKbtm72pEjZBbSH41ZIoREqkCR80BA",
                            sqlviw: 0
                        },
                        {});
                        tableData.value = res;
                    }else{
                        ElMessage.error("请先选择公司！");
                    }
                    
                };
                // 点击中间表格行
                const clickRow = (row)=>{
                    console.log("middle row:", row);
                    addEditModal.value.row = row;
                    getDetailTableData();
                };
                // 中间分页
                const currentPage = ref(1);
                const pageSize = ref(100);
                const handleSizeChange = (val) => {
                    console.log("size change:", val);
                };
                const handleCurrentChange = (val) => {
                    console.log("current page:", val);
                };
                // 右侧搜索表单
                const detailFormconfig = ref({
                    fieldList: [],
                });
                const detailFormModelValue = ref({});
                // 右侧表格
                const detailTableConfig = ref({
                    hasSelection: false,
                    hasIndex: false,
                    columns: [
                        { label: "角色", prop: "test" },
                        { label: "角色1", prop: "id" },
                        { label: "角色2", prop: "role2" },
                    ],
                    actionColumn: {
                        label: "操作",
                        hasRowEditAction: true,
                        hasRowDeleteAction: false,
                    },
                });
                // 获取右侧表格内容
                const detailTableData = ref([]);
                const getDetailTableData = async () => {
                    const res = await fetchData("https://cloud.lugangwool.com/server/getkehulbapi.php?dbcl=",
                    {
                        data: { xgid: addEditModal.value.row.id, type: "个人"  },
                        LIKE: "nl",
                        token: "28532B0F-60A1-D5FD-81F3-9E4EF092A67B",
                        datatab: "04db3XwTZoedzifkUhSP9zslIojpuSsKeMeLmWWInQemszF48HpptehC+xbIKixRCTY/hvnEeQW4f5E6vZc/2ZMKsUo",
                    },
                    {});
                    detailTableData.value = res;
                };
                // 右侧分页
                const detailCurrentPage = ref(1);
                const detailPageSize = ref(100);
                const handleDetailSizeChange = (val) => {
                    console.log("size change:", val);
                };
                const handleDetailCurrentChange = (val) => {
                    console.log("current page:", val);
                };
                // 右侧弹窗
                const refaddEditForm = ref();
                const addEditFormModelValue = ref({});
                const addEditFormconfig = ref({
                    fieldList: [],
                });
                // 提交右侧弹窗
                const submitForm = async ()=>{
                    console.log("addEditFormModelValue.value", addEditFormModelValue.value);
                    const res = await fetchData("https://cloud.lugangwool.com/server/setkehuzlapi.php?dbcl=", {
                        data: { 
                            Orgrole_code: addEditFormModelValue.value.Orgrole_code, 
                            Orgrole_name: addEditFormModelValue.value.Orgrole_name, 
                            iai_employee_id: addEditFormModelValue.value.iai_employee_id,
                            iai_name: addEditFormModelValue.value.iai_name,
                            xgid: addEditFormModelValue.value.xgid,
                            type:"个人" 
                        },
                        token: "36BDC6BA-C909-3C98-141A-999C8C2B8D79",
                        datatab: "04db3XwTZoedzifkUhSP9zslIojpuSsKeMeLmWWInQemszF48HpptehC+xbIKixRCTY/hvnEeQW4f5E6vZc/2ZMKsUo"
                    }, {});
                    console.log("submitressss:", res);
                    if (res.IsOk === "success") {
                        refaddEditForm.value.resetFields();
                        addEditModal.value.show = false;
                        getDetailTableData();
                        ElMessage.success("保存成功！");
                    } else {
                        ElMessage.error("保存失败！");
                    }
                };
                // 关闭右侧弹窗
                const cancelFormSubmit = () => {
                    refaddEditForm.value.resetFields();
                    addEditModal.value.show = false;
                }
                const addEditModal = ref({
                    show: false,
                    row: {},
                    submit: submitForm,
                    cancel: cancelFormSubmit
                });
                const roleNameList = ref([]);
                const addLoading = ref(false)
                const remoteMethod = (query) => {
                    if (query) {
                        addLoading.value = true;
                        setTimeout(() => {
                        addLoading.value = false;
                        clientList.value = clientList.value.filter((item) => {
                            return item.label.toLowerCase().includes(query.toLowerCase())
                        })
                        }, 200)
                    } else {
                        clientList.value = []
                    }
                }
                // 设置右侧弹窗表单
                const addObj = ref({});
                const addFieldList = ref([]);
                const editFieldList = ref([]);
                const isEdit = ref("add");
                // 打开右侧弹窗
                const openAddEditModal = (type, row) => {
                    if (type == "add") {
                        if(JSON.stringify(addEditModal.value.row) === '{}'){
                            ElMessage.error("请先选择客户信息！");
                            return;
                        }
                        addEditModal.value.show = true;
                        addEditModal.value.title = "新增";
                        isEdit.value = "add";
                        addEditFormModelValue.value = addEditModal.value.row;
                        addEditFormModelValue.value.iai_name = addEditModal.value.row.ma_name;
                        addEditFormModelValue.value.xgid = addEditModal.value.row.id;
                        addEditFormconfig.value.fieldList = addFieldList.value;
                    } else if (type == "edit") {
                        console.log("rowwwwwEdit:", row);
                        addEditModal.value.title = "编辑";
                        addEditModal.value.show = true;
                        isEdit.value = "edit";
                        addEditFormconfig.value.fieldList = editFieldList.value;
                        addEditFormModelValue.value = { ...row };
                        addEditFormModelValue.value.Orgrole_name = row.Orgrole_code + "," + row.Orgrole_name;
                        console.log("addEditFormModelValue.valueEdit:", addEditFormModelValue.value);
                    }
                };
                // 左侧树图标渲染
                const renderContent = (h, { node, data }) => {
                    let icon = null;
                    if (node.level == "1") {
                        icon = h("i", { class: "iconfont icon-folder", style: "margin-right: 5px;" });
                    } else if (data.children && data.children.length > 0) {
                        icon = h("i", { class: "iconfont icon-folder", style: "margin-right: 5px;" });
                    } else if (node.level !== "1" && (!data.children || (data.children && data.children.length < 1))) {
                        icon = h("i", { class: "iconfont icon-paper", style: "margin-right: 5px;" });
                    }
                    return h("span", { style: "flex: 1; display: flex; align-items: center; justify-content: start;" }, [icon, h("span", data.label)]);
                };
                onMounted(async () => {
                    // 获取树
                    const res = await fetchData("https://cloud.lugangwool.com/server/getkehulbapi.php?dbcl=",
                        {
                            token: "28532B0F-60A1-D5FD-81F3-9E4EF092A67B",
                            sqlviw1: true,
                            datatab: "688dQ00RNqzjMVLI1jwe7QmX0WxgeGYJSLC/wOOUOanOG6El+tUzO+OzfSGf6VDNFGuzxFQE0ud6AYY",
                            select: "a5efm98LHq6QTaPYas7hT9mZ0W9eLb2ba6sEFS9Q6LYxohibpeb5qEkNEdJSnCGvv2FA2NfIa/eCSG6+N6A2AzQ+D9iJ5IcbDZA57xmP7skV1FnfZEPBpoLKYa5U6cI8ucb8/hcnopEYLRSpK8BwhzALr9znpZ31rYByURVhEK4zrGFbBXr+EeXl",
                            LIKE: "nl"
                        },
                        {});
                    treeList.value = replaceFieldInTree(res,"name","label");
                    console.log("treeList.value", treeList.value);

                    // 获取中间表头
                    const tableHeadRes = await fetchData(
                        "https://cloud.lugangwool.com/server/getkehuzdapi1.php?dbcl=",
                        { xgid: "517", dataviw: "DataTable" },
                        {});
                    tableConfig.value.columns = tableHeadRes.map((x) => {
                        return {
                            label: x.title,
                            prop: x.field,
                            width: x.width,
                        };
                    });

                    // 设置中间搜索配置项
                    const obj = {};
                    tableHeadRes.filter((x, index) => {
                        if (index === 0) {
                            obj[x.field] = "";
                        }
                    })
                    formconfig.value.fieldList = tableHeadRes.filter((x, index) => index === 0).map((item) => {
                        return {
                            label: item.title + ":",
                            prop: item.field,
                            type: item.Label_Style === "select" ? "select" : item.leixing === "date" ? "date" : "input"
                        }
                    });
                    formModelValue.value = obj;

                    // 获取右侧表头
                    const detailTableHeadRes = await fetchData(
                        "https://cloud.lugangwool.com/server/getkehuzdapi1.php?dbcl=",
                        { xgid: "608", dataviw: "DataTable" },
                        {});
                    detailTableConfig.value.columns = detailTableHeadRes.map((x) => {
                        return {
                            label: x.title,
                            prop: x.field,
                            width: x.width,
                        };
                    });

                    // 设置右侧搜索配置项
                    const detailObj = {};
                    detailTableHeadRes.filter((x, index) => {
                        if (index === 0) {
                            detailObj[x.field] = "";
                        }
                    })
                    detailFormconfig.value.fieldList = detailTableHeadRes.filter((x, index) => index === 0).map((item) => {
                        return {
                            label: item.title + ":",
                            prop: item.field,
                            type: item.Label_Style === "select" ? "select" : item.leixing === "date" ? "date" : "input"
                        }
                    });
                    detailFormModelValue.value = detailObj;

                    // 设置右侧弹窗新增、修改的配置
                    detailTableHeadRes.filter((x) => {
                        if (x.sfbaocun === "1") {
                            addObj.value[x.field] = "";
                        }
                    })
                    addFieldList.value = detailTableHeadRes.filter((x) => x.sfbaocun === "1").map((item) => {
                        return {
                            label: item.title + ":",
                            prop: item.field,
                            type: item.Label_Style === "select" ? "select" : item.leixing === "date" ? "date" : "input",
                            disabled: item.readonly === "1" ? true : false
                        }
                    });
                    editFieldList.value = detailTableHeadRes.filter((x) => x.sfbaocun === "1").map((item) => {
                        return {
                            label: item.title + ":",
                            prop: item.field,
                            type: item.Label_Style === "select" ? "select" : item.leixing === "date" ? "date" : "input",
                            disabled: item.readonly === "1" ? true : false
                        }
                    });
                    // 获取弹窗中下拉列表
                    const roleNameRes = await fetchData("https://cloud.lugangwool.com/server/getdatalisapi.php?dbcl=", {
                        token: "3FC6B8A0-D398-C13C-1E53-809F4E525A77",
                        workid: "91410205-ce72-cf18-dfb5-b5a3c6b99ac2",
                        src: "",
                        data: {
                            CD00000664: 1,
                        }
                    }, {});
                    roleNameList.value = roleNameRes.results;
                    roleNameList.value = replaceFieldInTree(roleNameList.value, "text", "label");
                    roleNameList.value = replaceFieldInTree(roleNameList.value, "id", "value");
                    roleNameList.value = roleNameList.value.map(item=>{
                        return {
                            label: item.label,
                            value: item.value + "," + item.label
                        }
                    });
                    // 暂时写死
                    addFieldList.value = addFieldList.value.map((item)=>{
                        if(item.prop === "Orgrole_name"){
                            return {...item, options: roleNameList.value, remoteMethod: ()=>{console.log("111")}, changeMethod: (val)=>{
                                if(val){
                                    const orgroleList = val.split(",");
                                    addEditFormModelValue.value.Orgrole_code = orgroleList[0];
                                    addEditFormModelValue.value.Orgrole_name = orgroleList[1];
                                }else{
                                    addEditFormModelValue.value.Orgrole_code = "";
                                    addEditFormModelValue.value.Orgrole_name = "";
                                }
                            }}
                        }
                        return item;
                    });
                    editFieldList.value = editFieldList.value.map((item)=>{
                        if(item.prop === "Orgrole_name"){
                            return {...item, options: roleNameList.value, remoteMethod: ()=>{console.log("111")}}
                        }
                        return item;
                    });
                });

                return {
                    treeList,
                    renderContent,
                    defaultProps,
                    handleNodeClick,
                    clickNode,
                    formconfig,
                    formModelValue,
                    tableConfig,
                    tableData,
                    getTableData,
                    detailFormconfig,
                    detailFormModelValue,
                    clickRow,
                    currentPage,
                    pageSize,
                    handleSizeChange,
                    handleCurrentChange,
                    detailTableConfig,
                    detailTableData,
                    detailCurrentPage,
                    detailPageSize,
                    handleDetailSizeChange,
                    handleDetailCurrentChange,
                    refaddEditForm,
                    addEditFormModelValue,
                    addEditFormconfig,
                    addEditModal,
                    openAddEditModal,
                    addLoading
                };
            },
        };
        const app1 = createApp(vue3Composition1);
        app1.use(ElementPlus).mount("#app-main-${menu.index}");
        return app1;
    })();
</script>

<style>
    .box {
        height: 100%;
    }

    .table-options-box {
        display: flex;
        height: 100%;
        width: 100%;
        overflow: hidden;
        flex-direction: column;
    }

    .table-options-box .el-row,
    .table-options-box .el-row .tree-wrap {
        height: 100%;
    }

    .table-options-box .el-col {
        height: 100%;
        overflow: hidden;
    }

    .table-options-box .middle-table-wrap,
    .table-options-box .right-table-wrap {
        display: flex;
        height: 100%;
        width: 100%;
        overflow: hidden;
        flex-direction: column;
    }

    .table-options-box .zh-form {
        flex: 1;
    }

    .table-options-box .pagination {
        padding: 10px 0 0 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    .table-options-box .btn-wrap {
        margin-left: 12px;
    }
</style>
`; }